<template>
  <div class="m-products-list">
    <dl>
      <dd
        v-for="(item,index) in nav"
        :key="item.name"
        :class="[item.name, item.active ? 's-nav-active' : '']"
        @click="navSelect(index)"
      >
        {{ item.txt }}
      </dd>
    </dl>
    <ul>
      <Item v-for="(item, idx) in list" :key="idx" :meta="item" />
    </ul>
  </div>
</template>

<script>
import Item from './product.vue'
export default {
  components: {
    Item
  },
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  async asyncData ({ app }) {
    const { data } = await app.$axios.get('searchList')
    return { items: data.list }
  },
  data () {
    return {
      nav: [
        {
          name: 's-default',
          txt: '智能排序',
          active: true
        },
        {
          name: 's-price',
          txt: '价格最低',
          active: false
        },
        {
          name: 's-visit',
          txt: '人气最高',
          active: false
        },
        {
          name: 's-comment',
          txt: '评价最高',
          active: false
        }
      ]
    }
  },
  methods: {
    navSelect (i) {
      this.nav.forEach((item, idx) => {
        if (idx === i) {
          item.active = true
        } else {
          item.active = false
        }
      })
      if (i === 1) {
        if (this.nav[i].txt === '价格最低') {
          this.nav[i].txt = '价格最高'
          this.list.sort((a, b) => b.price - a.price)
        } else {
          this.nav[i].txt = '价格最低'
          this.list.sort((a, b) => a.price - b.price)
        }
      }
      if (i === 2) {
        this.list.sort((a, b) => b.rate - a.rate)
      }
      if (i === 3) {
        this.list.sort((a, b) => b.comment - a.comment)
      }
    }
  }
}
</script>
